<template>
	<div class="patient">
		<el-row>
			<el-col>
				<el-button class="add-btn" type="primary" icon="el-icon-plus" @click="dialogAccount=true">添加机构</el-button>
				<!--<el-select v-model="key_word" :clearable="true" filterable remote :remote-method="getSearchList" placeholder="请输入机构名称或编号" @change="clearSelectList" @focus="clearSelectList">
					<el-option
						v-for="item in searchList"
						:key="item.id"
						:label="item.name"
						:value="item.id"
						:loading="searchLoading">
					</el-option>
				</el-select>-->
				<el-input v-model="key_word" placeholder="请输入机构名称或编号" class="search-input"></el-input>
				<el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchValue">搜索</el-button>
			</el-col>
		</el-row>
		<el-row class="patient-table">
			<el-table
				:data="list"
				stripe
				v-loading="tableLoading"
				header-row-class-name="table-header"
				empty-text=""
				:header-cell-style="tableHeaderObj"
				:cell-style="cellStyle"
				:max-height="tableHeight"
				@row-click="viewAccount"
				style="width: 100%; border: 1px solid #ebeef5">
				<el-table-column
					prop="cnumber"
					label="机构编号"
					min-width="80"
					align="center">
				</el-table-column>
				<el-table-column
					prop="name"
					label="机构名称"
					min-width="180"
					align="center">
				</el-table-column>
				<el-table-column
					prop="admin_name"
					label="管理员"
					min-width="80"
					align="center">
				</el-table-column>
				<el-table-column
					prop="mobile"
					label="手机号"
					min-width="120"
					align="center">
				</el-table-column>
				<el-table-column
					label="最后登录"
					min-width="180"
					align="center">
					<template slot-scope="scope">
						<span v-show="scope.row.last_login_time==0">-</span>
						<span class="color-b" v-show="scope.row.last_login_time!=0">{{scope.row.last_login_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="状态"
					width="80"
					align="center">
					<template slot-scope="scope">
						<span :class="{'color-red':scope.row.status==2}">{{scope.row.status_text}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					min-width="150"
					align="center">
					<template slot-scope="scope">
						<div v-show="scope.row.status==1">
							<span class="span-btn" @click="editAccount(scope.row)">编辑</span>
							<span class="span-btn color-red" @click="changeStatus(scope.row.id, 2)">停用</span>
						</div>
						<div v-show="scope.row.status==2">
							<span class="span-btn" @click="changeStatus(scope.row.id, 1)">启用</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="list-page">
				<el-pagination v-if="totalCount>10"
											 background
											 layout="total, slot, prev, pager, next"
											 :total="totalCount"
											 @current-change="handleCurrentChange">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
				<el-pagination v-else
											 background
											 layout="total, slot"
											 :total="totalCount">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
			</div>
		</el-row>
		<!--添加机构-->
		<el-dialog
			title=""
			class="task-dialog add-dialog"
			:visible.sync="dialogAccount"
			width="682px"
			:show-close="false"
			:modal="true"
			top="10vh"
			@close="resetTmp(1)"
			:close-on-click-modal="false">
			<div class="task-dialog-header">
				<div class="header-left">
					添加新机构
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogAccount = false">取消</el-button>
					<el-button size="small" type="primary" @click="saveSubmit">保存</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<el-form :model="accountForm" ref="accountForm" :rules="accountRule" class="card-form" label-width="100px">
				<div class="task-dialog-title"></div>
				<el-col :span="24">
					<el-form-item label="机构编号：" class="card-item-1 l-space-28-r">
						<span  style="color:#909399;">系统自动创建4位编码</span>
					</el-form-item>
					<el-form-item label="机构名称：" class="card-item-1" prop="name">
						<el-input v-model="accountForm.name" placeholder="请输入名称，限字20" maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="管理员：" class="card-item-1" prop="username">
						<el-input v-model="accountForm.username" placeholder="请输入姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号：" class="card-item-1" prop="mobile">
						<el-input v-model="accountForm.mobile" placeholder="请输入手机号" maxlength="11"></el-input>
						<span style="color:#909399;display: block;">* 手机号即为系统登陆账号，初始密码为000000</span>
					</el-form-item>
					<el-form-item label="机构证件：" class="card-item-1" prop="imageUrl">
						<span v-for="(item,index) in accountForm.imageUrl" class="avatar">
							<i class="el-icon-circle-close close-img" @click="cancelUploadImg(index)"></i>
							<img :src="item" :key="index" @click="viewImg(index)">
						</span>
						<el-upload
							v-show="accountForm.imageUrl.length<3"
							ref="uploadImg"
							class="avatar-uploader"
							action=""
							:show-file-list="false"
							:file-list="addFileList"
							:auto-upload="false"
							:on-change="changeUploadImg"
							:on-preview="handlePreview"
							:before-upload="beforeAvatarUpload">
							<i class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<div class="clearfix"></div>
			</el-form>
		</el-dialog>
		<!--重置-->
		<el-dialog
			class="reset-dialog"
			title="提示"
			:visible.sync="dialogReset"
			top="30vh"
			width="370px">
			<span>重置后密码修改为6个0，此用户将无法自动登录。</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogReset = false">取 消</el-button>
				<el-button type="primary" @click="resetPassword">仍然重置</el-button>
  		</span>
		</el-dialog>
		<!--查看dialog-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogViewAccount"
			width="682px"
			:show-close="false"
			:modal="true"
			top="10vh">
			<div class="task-dialog-header">
				<div class="header-left">
					查看机构
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogViewAccount = false">关闭</el-button>
					<el-button size="small" type="primary" @click="viewEdit">编辑</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<el-form :model="editForm" ref="editForm" :rules="accountRule" class="card-form" label-width="90px">
				<div class="task-dialog-title"></div>
				<el-col :span="24">
					<el-form-item label="机构编号：" class="card-item-1">
						<span>{{editForm.cnumber}}</span>
					</el-form-item>
					<el-form-item label="机构名称：" class="card-item-1 account-mobile">
						<span>{{editForm.name}}</span>
					</el-form-item>
					<el-form-item label="管理员：" class="card-item-1">
						<span>{{editForm.admin_name}}</span>
					</el-form-item>
					<el-form-item label="手机号：" class="card-item-1">
						<span>{{editForm.mobile}}</span>
					</el-form-item>
					<el-form-item label="机构证件：" class="card-item-1">
						<span v-for="(item,index) in editForm.identity_img" class="avatar">
							<img :src="item" :key="index" @click="viewImg(index)">
						</span>
					</el-form-item>
				</el-col>
				<div class="clearfix"></div>
			</el-form>
		</el-dialog>
		<!--编辑dialog-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogEditAccount"
			width="682px"
			:show-close="false"
			:modal="true"
			@close="resetTmp(2)"
			top="10vh">
			<div class="task-dialog-header">
				<div class="header-left">
					编辑
				</div>
				<div class="header-right">
					<el-button size="small" @click="dialogEditAccount = false">关闭</el-button>
					<el-button size="small" type="primary" @click="saveEdit">保存</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<el-form :model="editForm" ref="editForm" :rules="accountRule" class="card-form" label-width="100px">
				<div class="task-dialog-title"></div>
				<el-col :span="24">
					<el-form-item label="机构编号：" class="card-item-1">
						<span>{{editForm.cnumber}}</span>
					</el-form-item>
					<el-form-item label="机构名称：" class="card-item-1" prop="name">
						<el-input v-model="editForm.name" placeholder="请输入机构名称"></el-input>
					</el-form-item>
					<el-form-item label="管理员：" class="card-item-1" prop="username">
						<el-input v-model="editForm.username" placeholder="请输入管理员姓名"></el-input>
					</el-form-item>
					<el-form-item label="手机号：" class="card-item-1" prop="mobile">
						<el-input v-model="editForm.mobile" placeholder="请输入手机号" maxlength="11"></el-input>
						<span class="color-b" style="display: block;cursor:pointer"	@click="dialogReset=true">重置密码</span>
					</el-form-item>
					<el-form-item label="机构证件：" class="card-item-1" prop="identity_img">
						<span v-for="(item,index) in editForm.identity_img" class="avatar">
							<i class="el-icon-circle-close close-img" @click="cancelUploadImg(index)"></i>
							<img :src="item" :key="index" @click="viewImg(index)">
						</span>
						<el-upload
							v-show="editForm.identity_img.length<3"
							ref="uploadEditImg"
							class="avatar-uploader"
							action=""
							:file-list="imgFileList"
							:show-file-list="false"
							:auto-upload="false"
							:on-change="changeUploadImg"
							:on-preview="handlePreview"
							:before-upload="beforeAvatarUpload">
							<i class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<div class="clearfix"></div>
			</el-form>
		</el-dialog>
		<!--最后登录-->
		<el-dialog
			class="reset-dialog"
			title="最后登录"
			:visible.sync="dialogLastLogin"
			top="30vh"
			width="400px">
			<el-form ref="lastLoginForm" :model="lastLoginForm" label-width="90px">
				<el-form-item label="登录账号：">
					<span>{{lastLoginForm.account}}</span>
				</el-form-item>
				<el-form-item label="登录日期：">
					<span>{{lastLoginForm.last_login_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
				</el-form-item>
				<el-form-item label="登录城市：">
					<span>{{lastLoginForm.last_login_city}}</span>
				</el-form-item>
				<el-form-item label="登录IP：">
					<span>{{lastLoginForm.last_login_ip}}</span>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!--查看图片-->
		<component ref="view" :is="viewPicture" :dialogViewVisible="dialogViewVisible" :imgs="imageUrl" @updateView="updateView" :showPrint="false" :index="imgIndex"></component>
	</div>
</template>
<style scoped>
	.patient{
		position:relative;
		height:100%;
	}
	.search-input{
		width:220px;
	}
	.search-btn{
		margin-left:15px;
		margin-right:15px;
	}
	.add-btn{
		margin-right:50px;
	}
	.high-search{
		font-size:14px;
		color:#409eff;
		cursor: pointer;
	}
	.high-search i{
		margin-left:5px;
	}
	.patient-table{
		height:calc(100vh - 220px);
		margin-top:40px;
	}
	.list-page{
		text-align: center;
		position:absolute;
		bottom:0px;
		left:50%;
		transform:translateX(-50%);
		margin-top:20px;
	}
	.page-span{
		margin-left:-14px;
		font-size:13px;
		margin-right:20px;
	}
	.color-red{
		color: #f56c6c!important;
	}
	.color-b{
		color:#409EFF!important;
		cursor: pointer;
	}
	.search-row{
		overflow-x: auto;
		margin-bottom:10px;
	}
	.search-row >>> .el-scrollbar__wrap{
		overflow-x: scroll;
	}
	.search-row >>> .el-select{
		margin-right:10px;
	}
	.search-row >>> .el-input__inner{
		width:0;
		padding:0;
		border:0;
		height:45px;
		line-height:45px;
	}
	.search-row >>> .el-input__prefix, .search-row >>> .el-input__suffix{
		position:relative;
	}
	.search-row >>> .el-input__prefix{
		margin-right:8px;
		cursor: pointer;
		color:#909399;
	}
	.search-row >>> .el-select .el-input .el-select__caret{
		color:#909399;
	}
	.select-age >>> .el-popper{
		display: none;
	}
	.age-popper >>> .el-input{
		width:100px;
	}
	.age-popper >>> .el-input__inner{
		text-align: center;
	}
	.el-popper[x-placement^=bottom]{
		margin-top:-6px;
	}
	.el-form--inline .el-form-item{
		margin-right:0;
		margin-top:5px;
		margin-bottom:10px;
	}
	.card-picker >>> .el-input__icon{
		display: none;
	}
	.card-picker >>> .el-range-separator{
		display: none;
	}
	.search-date{
		color:#909399;
		font-size:14px;
		cursor: pointer;
		margin-right:10px;
	}
	.search-date i{
		margin-left:4px;
		color:#909399;
	}
	.search-row >>> .el-date-editor{
		margin-right:10px;
	}
	.cascader-select >>> .el-cascader__label{
		padding:0;
	}
	.cascader-select >>> .el-input__suffix{
		display: none;
	}
	.block-row{
		height:55px;
	}
	.task-dialog >>> .el-dialog {
		/*height: 580px;*/
		margin-bottom: 0px;
		overflow: auto;
	}
	.task-dialog >>> .el-dialog__header{
		padding:10px 20px 10px;
	}
	.task-dialog-header {
		padding: 0 30px;
		margin-bottom: 10px;
	}
	.task-dialog-header .header-left {
		float: left;
		font-weight: bold;
		font-size: 16px;
		line-height: 44px;
	}
	.task-dialog-header .header-right {
		float: right;
		clear: right;
	}
	.task-dialog-header .header-right >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
		margin-top:6px;
	}
	.task-dialog-title {
		height:4px;
		background-color: #f5f7fa;
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.task-dialog >>> .el-dialog__body{
		padding:10px 0 20px;
	}
	.card-form .card-item-1{
		padding:0 30px;
		box-sizing: border-box;
	}
	.card-form .account-mobile span{
		display: block;
	}
	.card-form .rights-type-text{
		display: inline-block;
		margin-left:10px;
	}
	.card-form .card-item-1 >>> .el-input{
		width:340px;
	}
	.card-form >>> .el-form-item__label{
		text-align: left;
	}
	.l-space-28 >>> .el-form-item__label{
		letter-spacing: 28px;
	}
	.l-space-28-r >>> .el-form-item__label{
		text-indent: 10px;
	}
	.l-space-7 >>> .el-form-item__label{
		letter-spacing: 7px;
	}
	.card-form .key-info-left{
		width:50%;
		float:left;
	}
	.card-form .key-info-right{
		width:50%;
		float:right;
	}
	.card-form .key-info-right .picture-text{
		display: inline-block;
		width:100px;
		position:relative;
		top:-62px;
		line-height:22px;
		margin-left:27px;
	}
	.card-form .card-item-2{
		padding:0 0 0 30px;
		box-sizing: border-box;
	}
	.card-form .card-item-2 >>> .el-input{
		width:170px;
	}
	.card-form .card-item-3 >>> .el-input{
		width:572px;
	}
	.card-form .card-item-4 >>> .el-input{
		width:130px;
		margin-right:13px;
	}
	.card-form .card-item-5 >>> .el-input{
		width:210px;
	}
	.card-form .card-item-4 >>> .el-select:last-of-type .el-input{
		margin-right:0;
	}
	.card-form .birthday-text{
		display: inline-block;
		width: 30px;
		text-align: right;
	}
	.card-form >>> .el-form-item__label{
		padding:0;
	}
	.card-form >>> .el-form-item.is-required .el-form-item__label:before{
		letter-spacing: 0;
	}
	.card-form >>> .el-checkbox{
		width:110px;
	}
	.card-form >>> .el-checkbox+.el-checkbox{
		margin-left:0;
	}
	.patient >>> .el-table th.gutter{
		background-color:#f5f7fa;
	}
	.span-btn{
		color:#409EFF;
		cursor:pointer;
		margin-right:18px;
	}
	.span-btn:last-of-type{
		margin-right:0;
	}
	.authority-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:165px;
		display: inline-block;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color: #fff;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:#a5c7ff;
		border-color:#a5c7ff;
	}
	.card-form >>> .el-checkbox__input.is-disabled+span.el-checkbox__label{
		color:#a5c7ff;
	}
	.reset-dialog >>> .el-dialog{
		border-radius:5px;
	}
	.reset-dialog >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
	}
	.reset-dialog >>> .el-dialog__body{
		padding-top:10px;
	}
	.reset-dialog >>> .el-form-item__label{
		text-align: left;
	}
	.reset-dialog >>> .el-form-item{
		margin-bottom:0;
	}
	.avatar-uploader{
		width:160px;
		height:160px;
		display: inline-block;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 20px;
		font-weight: 700;
		color: #8c939d;
		width: 160px;
		height: 160px;
		line-height: 160px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		margin-left:10px;
	}
	.avatar {
		width: 162px;
		height: 162px;
		position: relative;
		overflow: hidden;
		display: inline-block;
		margin-right:15px;
	}
	.avatar img{
		width: 160px;
		height: 160px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
	}
	.avatar:last-of-type{
		margin-right:0;
	}
</style>
<style>
	.community-cas{
		margin-left:-80px;
	}
	.create-time-popper{
		margin-left:-55px;
	}
	.mobile-popper{
		background-color: #333333;
		border:0;
	}
	.mobile-popper .el-popover__title{
		text-align: center;
		color:#fff;
		margin-bottom: 15px;
		margin-top:10px;
	}
	.mobile-popper[x-placement^=top] .popper__arrow::after{
		border-top-color:#333333;
	}
</style>
<style rel="stylesheet/scss" lang="scss">
	.avatar {
		position: relative;
	.close-img {
		font-size:24px;
		position:absolute;
		top:0;
		right:0;
		opacity: 0;
		cursor:pointer;
	}
	&:hover {
	.close-img {
		opacity: 1;
	}
	}
	}
</style>
<script>
	import { accountList, remoteList, addAccount, resetPassword, accountStatus, updateAccount, lastLoginDetail, viewDetail } from '@/api/institution'
	import viewPicture from '@/components/viewPicture'
	import { getToken } from '@/utils/auth'
	export default{
		data () {
			var checkPhone = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入手机号'))
				} else if (value.length !== 11) {
					callback(new Error('手机号长度 11 个字符'))
				} else if (!(/^1[3456789]\d{9}$/.test(value))) {
					callback(new Error('手机号格式错误'))
				} else {
					callback()
				}
			}
			return {
				viewPicture: viewPicture,
				list: [],
				tableLoading: true,
				tableHeaderObj: {
					'background-color': '#f5f7fa',
					'color': '#606266',
					'height': '68px'
				},
				cellStyle: {
					'height': '68px',
					'cursor': 'pointer'
				},
				totalCount: 0,
				tableHeight: 0,
				page: {
					'per-page': 10,
					page: 1
				},
				pickerOptions2: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}]
				},
				key_word: '',
				searchList: [],
				searchLoading: false,
				dialogAccount: false,
				accountForm: {
					username: '',
					name: '',
					imageUrl: [],
					mobile: ''
				},
				accountRule: {
					username: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
					mobile: [{ required: true, validator: checkPhone, trigger: 'blur' }],
					name: [{ required: true, message: '请输入机构名称', trigger: 'blur' }],
					imageUrl: [{ required: true, message: '请上传机构证件', trigger: 'change' }],
					identity_img: [{ required: true, message: '请上传机构证件', trigger: 'change' }]
				},
				nameList: [],
				isIndeterminate: false,
				checkAll: false,
				authorityList: [
					{
						id: 1,
						value: '系统管理台',
						checkDisabled: false
					},
					{
						id: 2,
						value: '机构管理',
						checkDisabled: false
					},
					{
						id: 13,
						value: '运营管理',
						checkDisabled: false
					}
				],
				dialogReset: false,
				operateId: '',
				dialogViewAccount: false,
				editForm: {
					username: '',
					mobile: '',
					name: '',
					identity_img: []
				},
				dialogEditAccount: false,
				dialogLastLogin: false,
				lastLoginForm: {},
				dialogViewVisible: false,
				imgIndex: 0,
				imgFileList: [],
				addFileList: [],
				imageUrl: []
			}
		},
		created () {
			this.getList()
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.tableHeight = document.documentElement.clientHeight - 280
			})
			window.onresize = () => {
				that.$nextTick(() => {
					that.tableHeight = `${document.documentElement.clientHeight}` - 280
				})
			}
		},
		methods: {
			// 获取列表
			getList() {
				this.tableLoading = true
				accountList(Object.assign({}, this.page, {kw: this.key_word})).then(response => {
					this.tableLoading = false
					this.list = response.data.data
					this.totalCount = response.data._meta.totalCount
				})
			},
			handleCurrentChange(val) {
				this.page.page = val
				this.getList()
			},
			// 搜索列表
			getSearchList(query) {
				if (query !== '') {
					this.searchLoading = true
					remoteList({kw: query}).then(response => {
						this.searchList = response.data
						this.searchLoading = false
					})
				} else {
					this.searchList = []
				}
			},
			// 清空下拉选项
			clearSelectList () {
				this.searchList = []
				this.nameList = []
				this.accountForm.mobile = '-'
			},
			// 搜索选项变化
			searchValue () {
				this.getList()
			},
			// 弹框关闭
			resetTmp(index) {
				this.accountForm.username = ''
				this.accountForm.imageUrl = []
				this.accountForm.name = ''
				this.accountForm.mobile = ''
				this.addFileList = []
				this.$nextTick(() => {
					if (index === 1) {
						this.$refs['accountForm'].clearValidate()
					} else if (index === 2) {
						this.$refs['editForm'].clearValidate()
					}
				})
			},
			// 保存
			saveSubmit() {
				this.$refs['accountForm'].validate((valid) => {
					if (valid) {
						let submitForm = new FormData()
						for (const k in this.$refs.uploadImg.$refs['upload-inner'].fileList) {
							submitForm.append('file[]', this.$refs.uploadImg.$refs['upload-inner'].fileList[k].raw)
						}
						submitForm.append('username', this.accountForm.username)
						submitForm.append('name', this.accountForm.name)
						submitForm.append('mobile', this.accountForm.mobile)
						submitForm.append('token', getToken()) // 用户token
						addAccount(submitForm).then(response => {
							this.dialogAccount = false
							this.accountForm.imageUrl = []
							this.getList()
							this.$message.success('添加成功')
						})
					} else {
						return false
					}
				})
			},
			// 重置按钮
			resetAccount(id) {
				this.dialogReset = true
				this.operateId = id
			},
			// 重置密码
			resetPassword() {
				resetPassword({id: this.editForm.admin_id}).then(response => {
					this.$message.success('重置密码成功')
					this.dialogReset = false
				})
			},
			// 停用启用
			changeStatus(id, status) {
				accountStatus({id: id, status: status}).then(response => {
					if (status === 1) {
						this.$message.success('启用成功')
					} else if (status === 2) {
						this.$message.success('停用成功')
					}
					this.getList()
				})
			},
			// 查看
			viewAccount(row, event, column) {
				if (column.label !== '操作' && column.label !== '最后登录') {
					viewDetail({id: row.id}).then(response => {
					  this.editForm = response.data
						this.editForm.identity_img = response.data.identity_img
						this.dialogViewAccount = true
					})
				} else if (column.label === '最后登录') {
					if (row.last_login_time !== 0) {
						lastLoginDetail({admin_id: row.admin_id}).then(response => {
							this.lastLoginForm = response.data
							this.dialogLastLogin = true
						})
					}
				}
			},
			// 编辑
			editAccount(row) {
				this.imgFileList = []
				viewDetail({id: row.id}).then(response => {
					this.editForm = response.data
					this.editForm.username = this.editForm.admin_name
					this.editForm.identity_img = response.data.identity_img
					for (let index in this.editForm.identity_img) {
						this.imgFileList.push({name: index, url: this.editForm.identity_img[index]})
					}
					this.dialogEditAccount = true
				})
			},
			// 编辑保存
			saveEdit() {
				this.$refs['editForm'].validate((valid) => {
					if (valid) {
						let submitForm = new FormData()
						let existImg = []
						let uploadFlag = false
						for (const k in this.$refs.uploadEditImg.$refs['upload-inner'].fileList) {
							if (this.$refs.uploadEditImg.$refs['upload-inner'].fileList[k].raw) {
							  uploadFlag = true
								submitForm.append('file[]', this.$refs.uploadEditImg.$refs['upload-inner'].fileList[k].raw)
							} else {
								existImg.push(this.$refs.uploadEditImg.$refs['upload-inner'].fileList[k].url)
							}
						}
						if (!uploadFlag) {
							submitForm.append('file', [])
						}
						submitForm.append('existImg', existImg)
						submitForm.append('username', this.editForm.username)
						submitForm.append('name', this.editForm.name)
						submitForm.append('mobile', this.editForm.mobile)
						submitForm.append('id', this.editForm.id)
						submitForm.append('admin_id', this.editForm.admin_id)
						submitForm.append('token', getToken()) // 用户token
						updateAccount(submitForm).then(response => {
							this.$message.success('修改成功')
							this.getList()
							this.dialogEditAccount = false
						})
					} else {
						return false
					}
				})
			},
			// 查看的编辑按钮
			viewEdit() {
				this.dialogViewAccount = false
				this.editAccount(this.editForm)
			},
			beforeAvatarUpload(file, fileList) {
			},
			changeUploadImg(file, fileList) {
				const isJPG = file.raw.type === 'image/jpeg'
				const isPNG = file.raw.type === 'image/png'

				if (!isJPG && !isPNG) {
					this.$message.error('请上传图片!')
				} else {
					if (this.dialogAccount) {
						this.accountForm.imageUrl.push(file.url)
					} else if (this.dialogEditAccount) {
						this.editForm.identity_img.push(file.url)
					}
					if (this.accountForm.imageUrl.length > 0) {
						this.$refs['accountForm'].clearValidate(['imageUrl'])
					}
					if (this.editForm.identity_img.length > 0) {
						this.$refs['editForm'].clearValidate(['identity_img'])
					}
				}
			},
			handlePreview(file) {
			  console.log(file.url)
			},
			// 删除上传图片
			cancelUploadImg(index) {
			  if (this.dialogAccount) {
					this.accountForm.imageUrl.splice(index, 1)
				} else if (this.dialogEditAccount) {
					this.editForm.identity_img.splice(index, 1)
					this.$refs.uploadEditImg.$refs['upload-inner'].fileList.splice(index, 1)
				}
			},
			viewImg(index) {
				this.imgIndex = index
				this.dialogViewVisible = true
				if (this.dialogViewAccount || this.dialogEditAccount) {
				  this.imageUrl = this.editForm.identity_img
				} else if (this.dialogAccount) {
					this.imageUrl = this.accountForm.imageUrl
				}
				this.$nextTick(() => {
					this.$refs.view.$refs.swiper.setActiveItem(index)
				})
			},
			updateView(flag) {
				this.dialogViewVisible = flag
			}
		}
	}
</script>
